<style>
    .input_center {
        width: 200px;
    }

    .button_center {
        width: 200px;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
</style>

<template>
    <Form :model="formInline" :label-width="80" style="margin-top: 20px;">
        <h1 style="margin-left: 120px; margin-bottom: 20px">魔力抓娃娃</h1>
        <FormItem prop="user">
            <Input class="input_center" type="text" v-model="formInline.user" placeholder="Username" style="">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input class="input_center" type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button class="button_center" type="primary" @click="handleSubmit()">登录</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    data() {
        return {
            formInline: {
                user: '',
                password: ''
            },
            user: {
                username:''
            },
            ruleInline: {
                user: [
                    {
                        required: true,
                        message: 'Please fill in the user name',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: 'Please fill in the password.',
                        trigger: 'blur'
                    },
                    {
                        type: 'string',
                        min: 6,
                        message:
                            'The password length cannot be less than 6 bits',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    methods: {
        handleSubmit() {
            console.log('params:', this.$route.params)
            console.log('formInline:',this.formInline.user)
            console.log('password:', this.formInline.password)
            this.login(this.formInline)
            // this.$refs[name].validate(valid => {
            //     if (valid) {
            //         this.$Message.success('Success!')
            //     } else {
            //         this.$Message.error('Fail!')
            //     }
            // })
        },
        async login(formInline) {
            // var qs = require('qs');
            // axios.post('/foo', qs.stringify({ 'bar': 123 }));
            var params = new URLSearchParams();
            params.append('username', formInline.user);
            params.append('password', formInline.password);
            const response = await this.$axios.post('/meiju-boss/api/v1/auth/login', params)
            console.log('response:', response)
            if (response.data.success) {
                this.$Message.success(response.data.message);
                this.$router.replace({name:'Home', params:{user:response.data.data}})
            } else {
                this.$Message.error(response.data.message);
            }
        }
    }
}
</script>

